<template>
    <div class="app-container">
        <el-card>
            <!--顶部工具栏-->
            <div class="head-container">
                <!--搜索-->
                <div v-if="searchVisible">
                    <el-input
                            v-model="queryInfo.query"
                            class="filter-item"
                            placeholder="请输入内容"
                            size="small"
                            style="width: 200px;"
                            clearable
                            @clear="getTables"
                    />
                    <span>
          <el-button
                  class="filter-item"
                  size="mini"
                  type="primary"
                  icon="el-icon-search"
                  @click="getTables"
          >搜索</el-button>
        </span>
                </div>
                <div class="crud-opts">
          <span class="crud-opts-left">
            <el-button
                    class="filter-item"
                    icon="el-icon-plus"
                    size="mini"
                    type="primary"
                    @click="showDialog(0)"
            >新增</el-button>
          </span>
                    <el-button-group class="crud-opts-right">
                        <el-button
                                size="mini"
                                plain
                                type="info"
                                icon="el-icon-search"
                                @click="searchToggle"
                        />
                        <el-button
                                size="mini"
                                icon="el-icon-refresh"
                        />
                        <el-popover
                                placement="bottom-end"
                                width="150"
                                trigger="click"
                        >
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    icon="el-icon-s-grid"
                            >
                                <i
                                        class="fa fa-caret-down"
                                        aria-hidden="true"
                                />
                            </el-button>
                            <!--<el-checkbox
                              v-model="allColumnsSelected"
                              :indeterminate="allColumnsSelectedIndeterminate"
                              @change="handleCheckAllChange"
                            >
                              全选
                            </el-checkbox>
                            <el-checkbox
                              v-for="item in tableColumns"
                              :key="item.property"
                              v-model="item.visible"
                              @change="handleCheckedTableColumnsChange(item)"
                            >
                              {{ item.label }}
                            </el-checkbox>-->
                        </el-popover>
                    </el-button-group>
                </div>
            </div>
            <el-table :data="tables" stripe lazy>
                <el-table-column type="index"/>
                                    <el-table-column label="账号" prop="username"/>
                    <el-table-column label="密码" prop="password"/>
                    <el-table-column label="生日" prop="birthday"/>
                    <el-table-column label="头像" prop="headImg"/>
                    <el-table-column label="微信openId" prop="openId"/>
                    <el-table-column label="昵称" prop="nickName"/>
                    <el-table-column label="手机号码" prop="phone"/>
                    <el-table-column label="性别" prop="gender"/>
                    <el-table-column label="邮箱" prop="email"/>
                    <el-table-column label="头像地址" prop="avatarName"/>
                    <el-table-column label="头像真实路径" prop="avatarPath"/>
                    <el-table-column label="是否为admin账号" prop="isAdmin"/>
                    <el-table-column label="状态：1启用、0禁用" prop="enabled"/>
                    <el-table-column label="" prop="loginType"/>
                <el-table-column label="创建时间" prop="createTime" width="160px"/>
                <el-table-column fixed="right" label="操作" width="130px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                                   @click="showDialog(scope.row.id)"/>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeOne(scope.row.id)"/>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="queryInfo.pageNo"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-card>

        <el-dialog
                :title="formState === 0?'新增用户':'编辑用户'"
                :visible.sync="dialogVisible"
                width="572px"
                @close="dialogClose"
                :close-on-click-modal="false"
        >
            <!--表单区域-->
            <el-form ref="formRef" :inline="true" :model="form" size="small" :rules="formRules"
                     label-width="66px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password"/>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-input v-model="form.birthday"/>
                    </el-form-item>
                    <el-form-item label="头像" prop="headImg">
                        <el-input v-model="form.headImg"/>
                    </el-form-item>
                    <el-form-item label="微信openId" prop="openId">
                        <el-input v-model="form.openId"/>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="form.nickName"/>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="form.phone"/>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-input v-model="form.gender"/>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"/>
                    </el-form-item>
                    <el-form-item label="头像地址" prop="avatarName">
                        <el-input v-model="form.avatarName"/>
                    </el-form-item>
                    <el-form-item label="头像真实路径" prop="avatarPath">
                        <el-input v-model="form.avatarPath"/>
                    </el-form-item>
                    <el-form-item label="是否为admin账号" prop="isAdmin">
                        <el-input v-model="form.isAdmin"/>
                    </el-form-item>
                    <el-form-item label="状态：1启用、0禁用" prop="enabled">
                        <el-input v-model="form.enabled"/>
                    </el-form-item>
                    <el-form-item label="" prop="loginType">
                        <el-input v-model="form.loginType"/>
                    </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-show="formState === 0" @click="add">确 定</el-button>
                <el-button type="primary" v-show="formState === 1" @click="edit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {page, save, edit, detail, remove} from '@/api/user'

    export default {
        name: 'User',
        data() {
            return {
                tables: [],
                total: 0,
                formState: 0,
                queryInfo: {
                    query: '',
                    pageNo: 1,
                    pageSize: 5
                },
                form: {
                        username: '',
                        password: '',
                        birthday: '',
                        headImg: '',
                        openId: '',
                        nickName: '',
                        phone: '',
                        gender: '',
                        email: '',
                        avatarName: '',
                        avatarPath: '',
                        isAdmin: '',
                        enabled: '',
                        loginType: '',
                },
                formRules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, message: '请输入生日', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    headImg: [
                        {required: true, message: '请输入头像', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    openId: [
                        {required: true, message: '请输入微信openId', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    nickName: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请输入性别', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    avatarName: [
                        {required: true, message: '请输入头像地址', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    avatarPath: [
                        {required: true, message: '请输入头像真实路径', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    isAdmin: [
                        {required: true, message: '请输入是否为admin账号', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    enabled: [
                        {required: true, message: '请输入状态：1启用、0禁用', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                    loginType: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 3, max: 10, message: '用户名长度在3~10个字符之间', trigger: 'blur'}
                    ],
                },
                dialogVisible: false,
                searchVisible: true
            }
        },
        created() {
            this.getTables()
        },
        methods: {
            getTables() {
                page(this.queryInfo).then(res => {
                    this.tables = res.data.records
                    this.total = res.data.total
                })
            },
            handleSizeChange(val) {
                this.queryInfo.pageSize = val
                this.getTables()
            },
            handleCurrentChange(val) {
                this.queryInfo.pageNo = val
                this.getTables()
            },
            dialogClose() {
                this.$refs.formRef.resetFields()
                this.form = {}
            },
            add() {
                this.$refs.formRef.validate(async valid => {
                    if (!valid) return
                    save(this.form).then(res => {
                        this.$notify.success({
                            message: '添加成功'
                        })
                        this.dialogVisible = false
                        this.getTables()
                    })
                })
            },
            showDialog(id) {
                if (id === 0) {
                    this.formState = 0
                    this.dialogVisible = !this.dialogVisible
                } else {
                    this.formState = 1
                    detail(id).then(res => {
                        this.form = res.data
                        this.dialogVisible = true
                    })
                }
            },
            edit() {
                this.$refs.formRef.validate(async valid => {
                    if (!valid) return
                    edit(this.form).then(res => {
                        this.$notify.success({
                            message: '编辑成功'
                        })
                        this.dialogVisible = false
                        this.getTables()
                    })
                })
            },
            removeOne(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id).then(res => {
                        this.$message.success('删除成功')
                        this.getTables()
                    })
                })
            },
            onPopoverShow() {
                setTimeout(() => {
                    document.addEventListener('click', this.handleDocumentClick)
                }, 0)
            },
            onPopoverHide() {
                document.removeEventListener('click', this.handleDocumentClick)
            },
            handleDocumentClick(event) {
                this.pop = false
            },
            searchToggle() {
                this.searchVisible = !this.searchVisible
            }
        }
    }
</script>

<style scoped>
    .crud-opts {
        padding: 4px 0;
        display: -webkit-flex;
        display: flex;
        align-items: center;
    }

    .crud-opts .crud-opts-right {
        margin-left: auto;
    }
</style>
